<template>
  <el-table :data="tableData" ref="tableRef">
    <el-table-column prop="description" label="描述" min-width="200">
      <template #default="scope">
        <el-tooltip
          :content="scope.row.description"
          placement="top-start"
          :disabled="!isOverflow(scope)"
        >
          <div 
            class="cell-content"
            :style="{ width: getColumnWidth('description') + 'px' }"
          >
            {{ scope.row.description }}
          </div>
        </el-tooltip>
      </template>
    </el-table-column>
  </el-table>
</template>

<script setup>
import { ref, onMounted, nextTick } from 'vue'

const tableRef = ref(null)
const tableData = ref([
  { description: '这是一段很长的描述文本，需要省略显示' },
  { description: '短文本' },
  // ... 其他数据
])

const isOverflow = (scope) => {
  nextTick(() => {
  const el = scope.el
  return el.scrollWidth > el.clientWidth
  })
}

const getColumnWidth = (prop) => {
  if (!tableRef.value) return 0
  const column = tableRef.value.columns.find(col => col.property === prop)
  return column ? column.realWidth : 0
}

onMounted(() => {
  nextTick(() => {
    // 触发表格重新渲染以获取正确的 realWidth
    tableRef.value.doLayout()
  })
})
</script>

<style scoped>
.cell-content {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>
